<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Fetch polyfill example</title>

    <link rel="stylesheet" href="" />
  </head>

  <body>
    <h1>Fetch basic example</h1>

    <img src="" class="my-image" alt="A flower" />

    <script>
      if (browserSupportsAllFeatures()) {
        main();
      } else {
        loadScript("polyfills.js", main);
      }

      function main(err) {
        const myImage = document.querySelector(".my-image");

        fetch("flowers.jpg").then(function (response) {
          response.blob().then(function (myBlob) {
            let objectURL = URL.createObjectURL(myBlob);
            myImage.src = objectURL;
          });
        });
      }

      function browserSupportsAllFeatures() {
        return window.Promise && window.fetch;
      }

      function loadScript(src, done) {
        const js = document.createElement("script");
        js.src = src;
        js.onload = function () {
          done();
        };
        js.onerror = function () {
          done(new Error("Failed to load script " + src));
        };
        document.head.appendChild(js);
      }
    </script>
  </body>
</html>
